// 餐时数据
const meals ={
    breakfast : ['豆浆','油条','面包','饺子','小笼包','牛奶','酸奶', '豆包', '煎饼','馄饨','面条','炒面',
    ],
    lunch : ['煲仔饭','竹笼饭','猪脚饭','猪排饭','牛排饭','黄焖鸡米饭','腊肉炒饭','鸡蛋炒饭','汤饭','蛋包饭','海鲜拌饭','小鸡炖蘑菇',
    ],
    dinner : ['煲仔饭','竹笼饭','猪脚饭','西餐','牛排饭','黄焖鸡米饭','猪肚鸡','火锅','KFC','火山炒饭','寿司','小鸡炖蘑菇',
    ]
}
// 1. 餐时点击组件
class MealButton extends React.Component {
    constructor(props){
        super(props);
        this.changeFood = this.changeFood.bind(this);
    }

    //使得轮盘更换食物
    changeFood(){
        alert("功能暂时未实现");
    }
    mealFormat(meal){
        if( meal === 'breakfast') {
            return '早餐';
        } else if(meal === 'lunch') {
            return '午餐';
        }else {
            return '晚餐'
        }
    }
    render(){
        const mealTime = this.mealFormat(this.props.mealTime);
        return (
            <button class='change_meal_button'
                    onClick={ this.changeFood }>
                { mealTime }
            </button>
        )
    }
}

// 2. 轮盘单页
class SingleRoulette extends React.Component {
    constructor(props){
        super(props);
        this.state = { foodName:this.props.foodName };
        this.changeFood = this.changeFood.bind(this);
    }
    changeFood(e){
        // 点击单个轮盘，可以更改食物
        const name = prompt('请输入需要录入的食物名：');
        this.setState({
            foodName : name
        })
        e.preventDefault();
    }
    render(){
        const foodName = this.state.foodName
        return (
            <div
                class='single_roulette' 
                onClick = { this.changeFood }>
                <h1>{ foodName }</h1>
            </div>
            
        )
    }
}

// 3. 轮盘
class Roulette extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            singleRouletteList : meals[this.props.mealType].map((item,index) =>{
                if(index<9){
                    return <SingleRoulette foodName={ item } key={ index } class='single_roulette'></SingleRoulette>
                }
            })
        };
        this.handleStart = this.handleStart.bind(this);
    }
    handleStart(){
        const firstTime = setInterval(()=>{
            item = Math.floor(Math.floor(Math.random()*9+1));    //生产1-9的随机数
            $('.single_roulette').removeClass('active');
            $('.single_roulette').eq(item).addClass('active');
        },100)
        setTimeout(()=>{
            clearInterval(firstTime);
        },1000)
        const secondTime = setInterval(()=>{
            item = Math.floor(Math.floor(Math.random()*9+1));    //生产1-9的随机数
            $('.single_roulette').removeClass('active');
            $('.single_roulette').eq(item).addClass('active');
        },300)
        setTimeout(()=>{
            clearInterval(secondTime);
        },3000)
        const ThirdTime = setInterval(()=>{
            item = Math.floor(Math.floor(Math.random()*9+1));    //生产1-9的随机数
            $('.single_roulette').removeClass('active');
            $('.single_roulette').eq(item).addClass('active');
        },500)
        setTimeout(()=>{
            clearInterval(ThirdTime);
        },1500)
    }
    render(){
        return(
            <div>
                <div class='roulette'>
                    { this.state.singleRouletteList }
                </div>
                <button class='start' onClick={ this.handleStart }>开始</button>
            </div>
        )
    }
}

// 组件继承
class App extends React.Component{
    constructor(props){
        super(props);
        this.state = { aimType:'dinner' };  //默认为晚餐
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(newMealType){
        this.setState({aimType:newMealType})
    }

    render(){
        return (
            <div class='app'>
                <div  class='left_side'>
                    <MealButton mealType={ this.state.aimType } onMealTypeChange={ this.handleChange } mealTime='breakfast'></MealButton>
                    <MealButton mealType={ this.state.aimType } onMealTypeChange={ this.handleChange } mealTime='lunch'></MealButton>
                    <MealButton mealType={ this.state.aimType } onMealTypeChange={ this.handleChange } mealTime='dinner'></MealButton>
                </div>
                <div class='right_side'>
                    <Roulette mealType = { this.state.aimType } onMealTypeChange={ this.handleChange } ></Roulette>
                </div>
            </div>
        )
    }
}

ReactDOM.render(
    <App></App>,
    document.getElementById('root')
)